<template>
  <div id="musicInfo">
    <div id="musicBanner">
       <img class="musicImg" :src="musicInfo[0].albumImg" alt="">
        <div id="musicId">
          <h1 class="musicInfoTitle darkFont">{{musicInfo[0].musicName}} <span id="album" style="font-size: 16px"><span>所属专辑：</span><span>{{musicInfo[0].albumName}}</span></span></h1>
          <div id="musicInfo-fol" class="fontsize-18">
            <p class="darkFont"><span style="font-weight: 900">{{musicInfo[0].musicFollower}}&nbsp;</span>名关注者</p><div class="dot">•</div>
            <span class="labInfo" style="background-color: #31c27c;color: white">音乐</span><span class="labInfo" v-for="lab in (musicInfo[0].musicGen || ' ').split(' ')" :key="lab.id">{{lab}}</span>
          </div>
          <button class="button buttonInInfo flex --oneLine line-center buttonMusic" @click="followMusic" v-if="!followed">
            关注这个圈子
          </button>
          <button class="button buttonInInfo flex --oneLine line-center buttonMusic musicClicked" @click="followMusic" v-else>
            已关注
          </button>
        </div>
    </div>
    <music-menu/>
    <keep-alive>
      <router-view :pushMusicId="musicInfo[0].musicId" :pushMusicArtId="musicInfo[0].musicArtId"/>
    </keep-alive>

  </div>
</template>

<script>

  import musicMenu from "../../functional unit/musicMenu";
  import api from "../../../model/api";

  export default {
    name: 'musicInfo',
    data(){
      return {
        musicInfo:[{
          musicName: '',
          musicId: '',
          musicNameEn: '',
          musicGen: '',
          albumImg: '',
          musicFollower: '',
          albumName:'',
        }],
        followed: false

      }
    },
    components:{
      musicMenu ,
    },


    methods:{
      async addMusicViewNum(){
        const _musicId = this.musicInfo[0].musicId
        const {data:res} = await this.$axios.post('v1/musicViewNum',{musicId: _musicId})
        if(res.code === 200){
          return true
        }
      },
      getMusicInfo() {
        api.getMusic().then(res => {
          let id = this.$route.params.id
          let musicList = res.data
          this.musicInfo = musicList.filter(function (Obj) {
            if( Obj.musicNameEn === id){
              if(Obj.musicFollower >= 1000){
                Obj.musicFollower = Obj.musicFollower/1000 + 'k'
                return Obj
              }else{
                return Obj
              }
            }
          })
          this.addMusicViewNum()
        })
      },
      async followMusic(){
       if(this.loginState === true){
         const followArr = {
           userId: JSON.parse(sessionStorage.user).userId,
           musicId: this.musicInfo[0].musicId
         }
         if(this.followed === false){
           const {data:res} = await this.$axios.post("v1/followMusic",followArr)
           if(res.code === 200){
             this.$message.success("关注圈子成功！")
             this.followed = true
             this.musicInfo[0].musicFollower++
           }else{
             this.$message.error("关注圈子失败！请检查网络连接。")
           }
         }else if(this.followed === true){
           const {data:res} = await this.$axios.post("v1/unfollowMusic",followArr)
           if(res.code === 200){
             this.$message.success("取消成功")
             this.followed = false
             this.musicInfo[0].musicFollower--
           }else{
             this.$message.error("取消圈子失败！请检查网络连接。")
           }
         }
       }else{
         this.$message.error("请先登陆")
       }

      },
      async followState(){
        const followArr = {
          userId: JSON.parse(sessionStorage.user).userId,
          musicId: this.musicInfo[0].musicId
        }
        const {data:res} = await this.$axios.post('v1/judgeMusicFollow',followArr)
        if(res.code === 200){
          this.followed = true
        }
        if(res.code === 500){
          this.followed = false
        }

      },
      isLogin(){
        if(sessionStorage.token){
          this.followState()
          this.loginState = true
        }
      }
    },
    created () {
      this.getMusicInfo()
    },
    beforeUpdate() {
      this.isLogin()
    },

    // computed: {
    //   gameName(){
    //     return this.$route.params.gameName
    //   },
    //   musicId(){
    //     return this.$route.params.musicId
    //   },
    // },
  }

</script>

<style lang="less" scoped>
  #musicInfo{
    width: 100%;
    margin: 30px;
    #musicBanner{
      letter-spacing: 2px;
      width: 100%;
      display: flex;
      /*align-items: center;*/
      /*background-color: #c4c4c4;*/
    }
    h2{
      font-size: 60px;
    }
    #musicInfo-fol{
      display: flex;
      align-items: center;
      /*background-color: red;*/
    }
    .musicImg{
      width: 140px;
      border-radius: 6px;
      margin-right: 30px;
      /*box-shadow: -5px 5px 0 #ce52ff;*/
    }
    #musicId{
      position: relative;
    }
   button{
     width: 170px;
     position: absolute;
     bottom: 0;
   }
    .musicInfoTitle{
      display: flex;
      align-items: center;
    }
    #album{
      margin-left: 20px;
    }
    .buttonMusic{
      background-color: #31c27c;
      color: white;
      transition: all 0.1s ease-in-out;
      font-weight: 300;
    }
    .buttonMusic:hover{
      opacity: 0.8;
    }
    .musicClicked{
      background-color: #31c27c;
      color: rgba(255, 255, 255, 0.50);
    }

  }

</style>
